import * as d3 from 'd3'
/*
name: d3的力学图的组件
author: miaoge
*/
// 可选的类型
const _config = {
  type: 'circle',
  label: 'name',
  lineType: 'normal', // 可选 曲线arc,直线line
  lineColor: '#eee',
  arrowType: 'normal',
  textColor: '#555'
}
const _arrow = {
  d: 'M0,0 L0,24 L12,12 Z'
}

class forceContext {
  /**
   * 
   * @param {pad: svgEle} cof 
   */
  constructor(cof = _config) {
    console.log(cof)
    this.pad = d3.select(cof.pad)
    this.config = cof
  }

  start() {
    let _t = this
    _t.graph ? _t.graph.reomve() : null
    _t.graph = _t.pad.append('g').classed('graph', true)
    switch (_t.config.arrowType) {
      case 'normal':
        _t.arrow = _t.creatArrow(_arrow)
      case 'none':
        _t.arrow = _t.creatArrow()
    }

  }

  creatArrow(d) {
    let _t = this, _pad = _t.pad
    let marker = _pad.append('marker')
      .attr('id', 'arrow')
      .attr("markerUnits", "strokeWidth")
      .attr("markerWidth", 12)
      .attr("markerHeight", 12)
      .attr("viewBox", "0 0 24 24")
      .attr("refX", 0)
      .attr("refY", 12)
      .attr("orient", "auto")
    if (d) {
      marker.append("path")
        .attr('d', d)
        .attr('fill', _t.config.lineColor)
    }

  }

  //首先在初始化
  init() {
    this._pad
  }

  // 根据节点和线的数据进行数据处理
  dealData(nodes, lines) {

  }
}

export default forceContext